import { FormGroup, DATA_ENTRY } from '@/src/components';
import styles from './index.less';
import { useImperativeHandle, useRef, useEffect } from 'react';
import { useSelector, useDispatch } from 'umi';
import { insetTreeValueTitle } from './disposeDataFn';
import { operateTypeObj, namespace } from '@/src/newModels/pressureReport/SceneTemplateSettingsM';
import { priceMethodList } from '../constantConfig';
import { useInterval } from 'ahooks';

const FormItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
const StepOne = (props) => {
  const dispatch = useDispatch();
  const modelStateInfo = useSelector((state) => state[namespace]);
  const FormGroupInstance = useRef();
  const {
    operateType,
    sceneTemplateList,
    mainState: { sceneTemplateInfo },
  } = modelStateInfo;
  const clear = useInterval(() => {
    // 新增取消执行
    if (operateTypeObj.add) {
      clear();
    }
    // 等待FormGroup加载完成
    if (FormGroupInstance.current && FormGroupInstance.current?.formRef) {
      clear();
      if (operateType === operateTypeObj.edit) {
        if (sceneTemplateInfo) {
          FormGroupInstance.current?.setGroupFieldsValue({
            sceneTemplateName: sceneTemplateInfo?.sceneName,
            sceneTemplateDes: sceneTemplateInfo?.des,
            priceMethod: sceneTemplateInfo?.priceMethod ? sceneTemplateInfo?.priceMethod.toString() : undefined,
            copySceneConfig: sceneTemplateInfo?.copySceneConfig,
          });
        }
      }
    }
  }, 100);

  // 选择复制情景查询情景详情数据来供给 第二步编辑用
  const changeCopySceneConfig = (sceneId) => {
    // 拷贝的数据存到了copiedSceneTemplateInfo
    dispatch({
      type: `${namespace}/getSceneTemplateDetail`,
      payload: { sceneId, isCopy: true },
    });
  };
  useEffect(() => {
    return () => {
      clear();
    };
  }, [clear]);
  const getFormInfo = async () => {
    return await FormGroupInstance.current?.getFormGroupData();
  };
  useImperativeHandle(props.onRef, () => ({
    getFormInfo,
  }));
  return (
    <div className={styles.StepOne}>
      <FormGroup
        onRef={(ref) => (FormGroupInstance.current = ref)}
        autoLayout={false}
        rowNumber={1}
        dataSource={[
          {
            dataIndex: 'sceneTemplateName',
            title: '情景模板名称',
            type: DATA_ENTRY.INPUT,
            max: 20,
            initialValue: undefined,
            rules: [{ required: true, message: '请输入情景模板名称' }],
            span: 24,
            formItemLayout: FormItemLayout,
          },
          {
            dataIndex: 'sceneTemplateDes',
            title: '情景模板描述',
            type: DATA_ENTRY.INPUT,
            max: 500,
            showTextArea: true,
            autosize: { minRows: 10, maxRows: 20 },
            initialValue: undefined,
            rules: [{ required: true, message: '请输入情景模板描述' }],
            span: 24,
            formItemLayout: FormItemLayout,
          },
          {
            dataIndex: 'priceMethod',
            title: '资产定价方法',
            type: DATA_ENTRY.SELECT,
            dataSource: priceMethodList,
            initialValue: '1',
            positionBody: true,
            span: 24,
            formItemLayout: FormItemLayout,
          },
          {
            dataIndex: 'copySceneConfig',
            title: '复制情景配置',
            type: DATA_ENTRY.TREESELECT,
            dataSource: insetTreeValueTitle(sceneTemplateList) || [],
            onChange: changeCopySceneConfig,
            initialValue: undefined,
            positionBody: true,
            showSearch: true,
            treeDefaultExpandAll: true,
            span: 24,
            formItemLayout: FormItemLayout,
            disabled: operateType === operateTypeObj.edit,
          },
        ]}
      />
    </div>
  );
};
export default StepOne;
